<template>
	<view class="container">
		<view class="guess-section">
			<view 
				v-for="(item, index) in collectList0" :key="index"
				class="guess-item"
				@click="navToDetailPage(item.itemInfo)">
				<view class="image-wrapper">
					<xy-image :src="item.itemInfo.cover" mode="aspectFill"></xy-image>
				</view>
				<text class="title clamp">{{item.itemInfo.title}}</text>
				<text class="price">￥{{item.itemInfo.price}}</text>
			</view>
		</view>
		<uni-load-more v-show="dataPage.totalCount > 0" :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				page: 1,
				loadingType: 'more',
				collectList0: [],
				dataPage: {
					totalCount: 0,
				}
			};
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			...mapState(['app', 'user'])
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 5000);
		},
		onReachBottom(){
			if (this.loadingType != 'nomore') {
				if (this.dataPage.totalCount == this.collectList0.length()) {
					this.loadingType = 'nomore';
				} else {
					this.page += 1;
					this.loadingType = 'loading';
					this.loadData();
				}
			}
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				// 商品收藏
				let res1 = await this.util.request({
					url: '/v1/ishop/collect/my/0',
					method: 'get',
					data: {
						page: this.page
					}
				});
				if (res1.code == 200) {
					this.collectList0 = res1.data.dataList;
					this.dataPage = res1.data.dataPage;
				}
				if (this.dataPage.totalCount == this.collectList0.length) {
					this.loadingType = 'nomore';
				}
			},
			//详情页
			navToDetailPage(item) {
				let url = item.url;
				uni.navigateTo({
					url: '/pages/ishop/item/info?' + 'id=' + item.id
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 列表 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
</style>
